<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入css-->
    <link rel="stylesheet" href="../style.css" />
    <!--导入jquery-->
    <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script>
    <!--
                - ID选择器 :     #ID的名称
                - 类选择器:     以 . 开头  .类名
                - 元素选择器:    标签的名称
                - 通配符选择器:   *
                - 分组选择器:  选择器1,选择器2
            -->
    <script>
        //文档加载事件,页面初始化的操作
        $(function () {
            //初始化操作: 给按钮绑定事件,点击事件是click 不是 onclick
            $("#btn1").click(function () {
                $("#two").css("background-color","palegreen");
            });

            //找出mini类的所有元素
            $("#but2").click(function () {
                $(".mini").css("background-color","palegreen");
            });

            //找出所有div元素
            $("#btn3").click(function () {
                $("div").css("background-color","palegreen");
            })

            $("#btn4").click(function () {
                $("*").css("background-color","palegreen");
            })

            /*选择器分组*/
            //找出mini类 和 span元素
            $("#btn5").click(function () {
                $(".mini,span").css("background-color","palegreen");
            })
        })
    </script>
</head>
<body>
    <input type="button" value="找出ID为two的元素" id="btn1">
    <input type="button" value="找出mini类的所有元素" id="but2">
    <input type="button" value="找出所有div元素" id="btn3">
    <input type="button" value="通配符选择器" id="btn4" />
    <input type="button" value="找出mini类 和 span元素" id="btn5" />
    <br>
    <div id="one">                  //外层div 有float属性，不占空间
        <div class="mini">1-1</div> //内层div 直接放置与其中
    </div>
    <div id="two">
        <div class="mini">2-1</div>
        <div class="mini">2-2</div>
    </div>
    <div id="three">
        <div class="mini">3-1</div>
        <div class="mini">3-2</div>
        <div class="mini">3-3</div>
    </div>
    <span id="four"></span>
</body>
</html>